<template>
	<view class="l-upload">
		<view class="upload-box">
			<view class="image-item"
				:style="{width:width+'rpx',height:height+'rpx','--margin-right':marginRight + 'rpx',marginRight:(index + 1) % lineNum == 0 ? 0 : marginRight + 'px'}"
				v-for="(item,index) in fileList" :key="index">
				<block>
					<image :src="item.url" class="img" :style="{width:width+'rpx',height:height+'rpx'}"
						@tap.stop="previewImage(index)" mode="aspectFill"></image>
					<view class="img-del" @tap.stop="delImage(index)"></view>
				</block>
			</view>
			<view v-if="isShowAdd" class="upload-add" :style="{'width':width+'rpx',height:height+'rpx'}"
				@tap="chooseFile">
				<view class="upload-icon icon-tianjia"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'lUpload',
		props: {
			//图片宽度
			width: {
				type: [Number, String],
				default: 220
			},
			//图片高度
			height: {
				type: [Number, String],
				default: 220
			},
			// 上传类型 图片img/视频video  默认都可以
			uploadType: {
				type: String,
				default: 'all'
			},
			//禁用添加
			disableAdd: {
				type: Boolean,
				default: false
			},
			//限制数
			limit: {
				type: Number,
				default: 40
			},
			//original 原图，compressed 压缩图，默认二者都有
			sizeType: {
				type: Array,
				default () {
					return ['original', 'compressed']
				}
			},
			//album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
			sourceType: {
				type: Array,
				default () {
					return ['camera', 'album']
				}
			},
			//可上传图片类型，默认为空，不限制  Array<String> ['jpg','png','gif']
			imageFormat: {
				type: Array,
				default () {
					return []
				}
			},
			//图片路径
			images: {
				type: Array,
				default () {
					return []
				}
			},
			//视频路径
			videos: {
				type: Array,
				default () {
					return []
				}
			},
			//服务器接口地址。当接口地址为空时，直接返回本地图片地址
			serverUrl: {
				type: String,
				default: ""
			},
			//文件对应的key，默认为 file
			fileKeyName: {
				type: String,
				default: "file"
			},
			//HTTP 请求 Header, header 中不能设置 Referer。
			header: {
				type: Object,
				default () {
					return {}
				}
			},
			//HTTP 请求中其他额外的 form data
			formData: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {
				//图片地址
				imageList: [...this.images],
				//图片地址
				videoList: [...this.videos],
				fileList: [...this.videos, ...this.images],
				marginRight: 0,

				lineNum: 0,
				videoContext: null,
				tup: []
			}
		},
		computed: {
			isShowAdd() {
				let isShow = true;
				if (this.disableAdd || (this.limit && (this.imageList.length + this.videoList) >= this.limit)) {
					isShow = false;
				}
				return isShow
			}
		},
		created() {
			this.imageList = this.tup
			console.log(this.tup)
			this.initBoxData()
		},
		methods: {
			change(index) {
				this.fileList = [...this.videoList, ...this.imageList]
				// console.log(this.fileList)
				this.$emit('complete', {
					imageArr: [...this.imageList],
					panduan: index,
					videoArr: [...this.videoList],
				})
				console.log([...this.imageList])
				this.$emit('completea', {
					imageArr: [...this.imageList],
					panduan: index,
					videoArr: [...this.videoList],
				})
				console.log([...this.imageList])
			},
			initBoxData() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.upload-box').fields({
					rect: true, //返回节点布局位置
					size: true //返回节点尺寸
				}, res => {
					let imgwidth = Math.floor(this.width / 2.5)
					this.lineNum = Math.floor(res.width / imgwidth)
					this.marginRight = (res.width - this.lineNum * imgwidth) / (this.lineNum - 1)
				});
				query.exec(); //执行
			},
			toast(text) {
				text && uni.showToast({
					title: text,
					icon: "none"
				});
			},

			childMethod() {
				this.fileList = []
				this.imageList = []
				this.videoList = []
				this.marginRight = 0
				this.lineNum = 0
				this.videoContext = null
			},
			chooseFile() {
				if (this.uploadType == 'img') {
					this.chooseImage()
				} else if (this.uploadType == 'video') {
					this.chooseVideo()
				} else {
					uni.showActionSheet({
						itemList: ['图片', '视频'],
						success: (res) => {
							if (res.tapIndex + 1 == 1) {
								this.chooseImage()
							} else {
								this.chooseVideo()
							}
						},
						fail: function(res) {
							console.log(res.errMsg);
						}
					});
				}

			},



			chooseImage() {
				uni.chooseMedia({
					count: this.limit - this.imageList.length - this.videoList.length,
					sizeType: this.sizeType,
					sourceType: this.sourceType,
					success: (res) => {
						// res.tempFiles 是 [{ tempFilePath, size, … }, …]						
						for (const f of res.tempFiles) {
							const path = f.tempFilePath || f.path;
							let fileSizeMB = f.size / (1024 * 1024);
							if (fileSizeMB >= 4) {
								this.compressByPath(f.tempFilePath,this.imageList)
							} else {
								this.imageList.push({
									url: path,
									key: null
								});
							}
						}
						this.change();
					}
				});
			},

			// 示例：Canvas压缩循环逻辑
			compressByPath(tempFilePath) {
				uni.compressImage({
					src: tempFilePath,
					quality: 70, // 质量参数 0-100，默认80
					success: (compressRes) => {
						this.imageList.push({
							url: compressRes.tempFilePath,
							key: null
						});
						console.log('压缩成功:', compressRes.tempFilePath);
						this.change()
					},
					fail: (err) => console.error('压缩失败:', err)
				});
			},

			uploadImage(index, url, type) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.serverUrl,
						name: this.fileKeyName,
						header: this.header,
						formData: this.formData,
						filePath: url,
						success: (res) => {
							if (res.statusCode == 200) {
								//返回结果 此处需要按接口实际返回进行修改
								let data = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
								if (data.code === '根据实际情况修改') {
									if (type === 'image') { //图片 -此处无需修改
										this.imageList.push(...data
											.data) //根据实际情况修改-（this.imageList不能改）
									} else if (type === 'video') { //视频 -此处无需修改
										this.videoList.push(...data
											.data) //根据实际情况修改-（this.videoList不能改）
									}

								} else {
									// 上传失败
								}
								resolve()
							} else {
								reject(res.msg)
							}
						},
						fail: function(res) {
							reject(res)
						}
					})
				})

			},
			delVideo(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除该视频吗？',
					success: (res) => {
						if (res.confirm) {
							this.videoList.splice(index, 1)
							this.$emit("remove", {
								index: index,
								type: 'video'
							})
							this.change()
						}
					}
				})
			},
			delImage(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除该图片吗？',
					success: (res) => {
						if (res.confirm) {
							this.imageList.splice(index, 1)
							this.$emit("remove", {
								index: index,
								type: 'image'
							})
							this.change(1)
						}
					}
				})
			},
			previewImage(index) {
				if (!this.imageList.length) return;
				uni.previewImage({
					current: this.imageList[index],
					loop: true,
					urls: this.imageList
				})
			},
			xiugaitpi(res) {
				this.imageList = res.coverList ? [...res.coverList] : [];
				this.fileList = [...this.videoList, ...this.imageList]; // 若界面渲染依赖fileList
				this.$forceUpdate(); // 强制刷新，保险起见
				this.change()
				console.log('imageList', this.imageList);
			},
			xiugaitpia(res) {
				console.log(res);
				this.imageList = res.aiImageList ? [...res.aiImageList] : [];
				this.fileList = [...this.videoList, ...this.imageList]; // 若界面渲染依赖fileList
				this.$forceUpdate(); // 强制刷新，保险起见
				this.change()
				console.log('imageList', this.imageList);
			}
		}
	}
</script>
<style lang="scss" scoped>
	@font-face {
		font-family: 'l-icon';
		src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	.upload-icon {
		font-family: "l-icon" !important;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		padding: 10rpx;
	}

	.icon-tianjia:before {
		content: "\e63b";
	}


	.l-upload {
		width: 100%;

		.upload-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.image-item {
				position: relative;
				margin-bottom: var(--margin-right);


				.img {
					display: block;
				}

				.img-del {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: -12rpx;
					top: -12rpx;
					background-color: #EB0909;
					border-radius: 50%;
					color: white;
					font-size: 34rpx;
					z-index: 200;

					&::before {
						content: '';
						width: 16rpx;
						height: 1px;
						position: absolute;
						left: 10rpx;
						top: 18rpx;
						background-color: #fff;
					}
				}
			}

			.upload-add {
				font-size: 68rpx;
				font-weight: 100;
				color: #888;
				background-color: #F7F7F7;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
			}
		}
	}
</style>